<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Product Details</title>
<link href="css/productdetail.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/cloud-zoom.1.0.2.min.js"></script>
<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</head>
<body><s:iterator>
	<div id="container">
		<div class="demo">
			<div class="zoom-section">
				<div class="zoom-small-image">
					<a href='img/product_line_id/<s:property value="id" />A.jpg' class='cloud-zoom'
						id='zoom1' rel="adjustX:10, adjustY:-4"> <img
						src="img/product_line_id/<s:property value="id" />A.jpg" width="240" height="320"
						alt='' title="Optional title display" onerror="this.src='img/product_line_id/noPhoto.jpg'" />
					</a>
				</div>
				<div class="zoom-desc">
					<h3>Product details</h3>
					<p>
						<a href='img/product_line_id/<s:property value="id" />A.jpg'
							class='cloud-zoom-gallery' title='Red'
							rel="useZoom: 'zoom1', smallImage: 'img/product_line_id/<s:property value="id" />A.jpg' ">
							<img width="48" height="64" class="zoom-tiny-image"
							src="img/product_line_id/<s:property value="id" />A.jpg" 
							onerror="this.src='img/product_line_id/noPhoto.jpg'" />
						</a> <a href='img/product_line_id/<s:property value="id" />B.jpg'
							class='cloud-zoom-gallery' title='Blue'
							rel="useZoom: 'zoom1', smallImage: 'img/product_line_id/<s:property value="id" />B.jpg'">
							<img width="48" height="64" class="zoom-tiny-image"
							src="img/product_line_id/<s:property value="id" />B.jpg" alt="Thumbnail 2" 
							onerror="this.src='img/product_line_id/noPhoto.jpg'" />
						</a> <a href='img/product_line_id/<s:property value="id" />C.jpg'
							class='cloud-zoom-gallery' title='Blue'
							rel="useZoom: 'zoom1', smallImage: 'img/product_line_id/<s:property value="id" />C.jpg' ">
							<img width="48" height="64" class="zoom-tiny-image"
							src="img/product_line_id/<s:property value="id" />C.jpg" alt="Thumbnail 3" 
							onerror="this.src='img/product_line_id/noPhoto.jpg'" />
						</a> <a href='img/product_line_id/<s:property value="id" />D.jpg'
							class='cloud-zoom-gallery' title='Blue'
							rel="useZoom: 'zoom1', smallImage: 'img/product_line_id/<s:property value="id" />D.jpg' ">
							<img width="48" height="64" class="zoom-tiny-image"
							src="img/product_line_id/<s:property value="id" />D.jpg" alt="Thumbnail 4" 
							onerror="this.src='img/product_line_id/noPhoto.jpg'" />
						</a>

					</p>
					
					<p>
						<strong>Product Name: <font color="red">
						<s:property value="product_lines.get(0).getName()"/></font></strong>
					</p>
					<p>
						<strong>Product Description: <font color="red">
						<s:property value="product_lines.get(0).getDescription()"/></font></strong>
					</p>
					<p>
						<strong>Price: $ <font color="red">
						<s:property value="product_lines.get(0).getPrice()"/></font></strong>
					</p>
					
					</s:iterator>
				
					<p>Item Available: </p> 
				
					<form action="addToCart">
						<select name="productItemId">
							<s:iterator value="product_items">
							<option value='<s:property value="id"/>' >
							
								Size: <s:property value="size.getName()"/>&nbsp
								Color:<s:property value="color.getName()"/>
								
							</option>
							<p></p>
							<p></p>
							<p></p>
							</s:iterator>
							
						</select>
						
							<p></p>
							<p>Number: </p>
							<select name="quantity">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
							<br />
							<p>Add to Shopping Cart</p>
							<input type="submit" value="Add"/>
					</form>

				</div>
			</div>
		</div>
	</div>


</body>
</html>
